<div class="goods-dialog">
    <ul class="nav nav-tabs v-nav-tabs pt-15" role="tablist">
        <li role="presentation" class="active"><a href="#list" aria-controls="list" role="tab" data-toggle="tab" class="flex-auto-center">商品列表</a></li>
        <div class="input-group search-input-group pull-right">
            <input type="text" class="form-control" placeholder="商品名称" name="goods_name" id="goods_name">
            <span class="input-group-btn"><a class="btn btn-primary search">搜索</a></span>
        </div>
    </ul>
    <div class="dialog-box">
        <table class="table v-table table-auto-center">
            <thead>
            <tr>
                <th class="col-md-10">商品列表</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="list">

            </tbody>
        </table>
    </div>
    <div>
        <span class="user_name_span J-user_name">选中的商品：</span>
        <input type="text" class="form-control goods_val J-admin_name"  name="goods_val" disabled>
    </div>
    <input type="hidden" id="page_index">
    <nav aria-label="Page navigation" class="clearfix">
        <ul id="page" class="pagination pull-right"></ul>
    </nav>
</div>
<script>
    require(['util'],function(util) {
        $(document).ready(function(){
            var width = $(".J-user_name").innerWidth();
            $('.J-admin_name').css('padding-left',width);
        });
        util.initPage(getList);
        function getList(page_index) {
            $("#page_index").val(page_index);
            var goods_name = $("#goods_name").val();
            $.ajax({
                type: "post",
                url: "{:__URL('PLATFORM_MAIN/goods/selectGoodsList')}",
                async: true,
                data: {
                    "page_index": page_index,
                    "goods_name": goods_name
                },
                success: function (data) {
                    var html = '';
                    if (data["data"].length > 0) {
                        for (var i = 0; i < data["data"].length; i++) {
                            html += '<tr>';
                            html += '<td>';
                            html += '<div class="media text-left">';
                            html += '<div class="media-left"><img src="' + data["data"][i]['pic_cover'] + '" onerror=javascript:this.src="http://iph.href.lu/60x60" style="max-width:none;width:60px;height:60px;"></div>';
                            html += '<div class="media-body break-word">';
                            html += '<div class="line-2-ellipsis">' + data["data"][i]['goods_name'] + '</div>';
                            html += '<div class="line-1-ellipsis text-danger strong">' + data["data"][i]['price'] + '</div>';
                            html += '</div>';
                            html += '</div>';
                            html += '</td>';
                            html += '<td><a href="javascript:void(0);" class="text-primary selectedGoods" data-id = "' + data["data"][i]['goods_id'] + '" data-name="' + data["data"][i]['goods_name'] + '" data-pic="' + data["data"][i]['pic_cover_mid'] + '">选择</a></td>';
                            html += '</tr>';
                        }

                    } else {
                        html += '<tr align="center"><th colspan="2">暂无符合条件的数据记录</th></tr>';
                    }
                    $('#page').paginator('option', {
                        totalCounts: data['total_count']  // 动态修改总数
                    });
                    $("#list").html(html);selectedGoods();
                }
            });
        }
        $('.search').on('click', function () {
            util.initPage(getList);
        });
        function selectedGoods() {
            $('.selectedGoods').on('click', function () {
                var id = $(this).data('id');
                var pic = $(this).data('pic');
                var name = $(this).data('name');
                $("#selectgoods_id").val(id);
                $("#pic_id").val(pic);
                $(".goods_val").val(name);
            })
        }
    })
</script>